<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      function App() {
        const [username, setUsername] = React.useState("");
        const [password, setPassword] = React.useState("");
        const changeForm = (type) => {
          return (e) => {
            switch (type) {
              case "username":
                setUsername(e.target.value);
                break;
              case "password":
                setPassword(e.target.value);
            }
          };
        };
        const show = (e) => {
          e.preventDefault();
          console.log("用户名是", username, "密码是", password);
        };
        return (
          <form>
            <h1>收集表单数据</h1>
            <p>
              用户名:
              <input type="text" value={username} onChange={changeForm("username")}/>
            </p>
            <p>
              密码:
              <input type="text" value={password} onChange={changeForm("password")}/>
            </p>
            <button onClick={show}>按钮</button>
          </form>
        );
      }
      ReactDOM.createRoot(document.getElementById("app")).render(<App />);
    </script>
  </body>
</html>
